<template>
  <view class="page">
    <Sub-title label="请输入验证码" :bold="false" />
    <u-input
      placeholder="请输入验证码"
      border="bottom"
      maxlength="6"
      v-model="code"
      placeholder-style="fontSize: 24rpx; color: #DADADA"
      clearable
    />
    <view class="btn" @click="handleSubmit">确定</view>
  </view>
</template>

<script>
import { myBindPhone } from "@/request/myApi.js";
export default {
  data() {
    return {
      mobile: "", // 手机号
      code: "", // 验证码
    };
  },
  onLoad(e) {
    this.mobile = e.mobile;
  },
  methods: {
    // 确定绑定
    handleSubmit() {
      if (!this.code) {
        uni.showToast({
          title: "验证码不能为空",
          icon: "none",
        });
        return;
      }
      myBindPhone({
        mobile: this.mobile,
        captcha: this.code.join(""),
        client_id: null,
      }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "绑定成功",
            icon: "none",
          });
          uni.switchTab({
            url: "/pages/tabBar/qiuIndex",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 40rpx;
  .btn {
    margin-top: 100rpx;
    width: 100%;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    color: $active-color;
    font-size: 28rpx;
    background-color: #cee7e5;
    border-radius: 46rpx;
    &:active {
      background-color: #c3e0de;
    }
  }
}
</style>
